<template>
  <div>
   <myhead ></myhead>
   <my-swiper :list="swiperList"></my-Swiper>
   <icon :list="icoList"> </icon>
   <reco :list="recoList" key="2"></reco>
   <week :list="weekList" key="1"></week>
  </div>
</template>

<script>
import myHead from './components/myhead'
import mySwiper from './components/mySwiper'
import myIcon from './components/icons.vue'
import myReco from './components/reco.vue'
import week from './components/week.vue'
import axios from 'axios'
import { mapState } from 'vuex'

export default {
  name: 'home',
  components: {
    myhead: myHead,
    mySwiper,
    icon: myIcon,
    reco: myReco,
    week
  },
  data () {
    return {
      lastcity: '',
      swiperList: [],
      icoList: [],
      recoList: [],
      weekList: []
    }
  },
  computed: {
    ...mapState(['city'])
  },
  methods: {
    getData () {
      axios.get('/api/index.json?city=' + this.city)
        .then(this.deal)
    },
    deal (data) {
      data = data.data
      data = data.data
      this.swiperList = data.swiperList
      this.icoList = data.iconList
      this.recoList = data.recommendList
      this.weekList = data.weekendList
    }
  },
  mounted () {
    this.getData()
    this.lastcity = this.city
    console.log('mounted')
  },
  activated () {
    this.city === this.lastcity ? null : (console.log('change city'), this.getData(), this.lastcity = this.city)
  } 
}
</script>

<style>
*{
  touch-action: none;
}
</style>
